<template>
  <Transition>
    <div class="progress-bar" v-if="show">
      <a-progress
        :percent="percent"
        :show-info="false"
        status="active"
        strokeColor="#3d6d99"
      />
    </div>
  </Transition>
</template>
<script setup>
import { inject } from 'vue'
import { percentKey, showKey } from './index.js'
let percent = inject(percentKey)
let show = inject(showKey)
</script>
<style lang="less" scope>
.progress-bar {
  position: fixed;
  top: -14px;
  left: -4px;
  right: -4px;
  z-index: 1000;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
